<template>
  <div>这是User页面</div>
  <div class="menu">
    <router-link to="/user/order">我的订单</router-link>
    <router-link to="/user/setting" >个人设置</router-link>
    <hr>
<!--    动态路由-->
    <li v-for="item in articles">
      <router-link :to="'/user/page/'+item.id">{{item.title}}</router-link>
    </li>
<!--    参数传递 第一种方式-->
    <li><router-link to="/user/article?id=1&click=20">新闻一</router-link></li>
<!--参数传递：query方式-->
    <li><router-link :to="{path:'/user/article',query:{id:4,click:22}}">新闻2</router-link></li>
    <!--自定义参数传递：query方式-->
    <button @click="$router.push({path:'/user/article',query:{id:5,num:30}})">用户协议</button>
  </div>

  <div class="content">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "User",
  data(){
    return{
      articles:[
        {id:1,title:'订单查询'},
        {id:2,title:'退换货流程'},
        {id:3,title:'用户协议'},
        {id:4,title:'支付方式'},
      ],
      path:'/user'
    }
  },
  created() {
    console.log('User--组件被创建');
  },
  unmounted() {
    console.log('User--组件被销毁');
  },
  activated() {
    console.log('User##keep-alive 缓存的组件激活时调用');
    this.$router.push(this.path);
  },
  deactivated() {
    console.log('User##keep-alive 缓存的组件停用时调用');
  },
  //组件内路由守卫beforeRouteLeave组件内离开
  beforeRouteLeave(to,from){
    this.path = from.fullPath;
  }
}
</script>

<style scoped>
  .menu{
    width: 30%;
    min-height: 300px;
    background: #888888;
    float: left;
  }
  .menu a{
    display: block;
    padding: 10px;
    color: white;
  }
  .menu a.router-link-exact-active{
    color: red;
  }
  .content{
    width: 70%;
    min-height: 300px;
    background: #ccc;
    float: left;
  }
  li{
    list-style: none;
  }
</style>